[#include "../../../common/html.ftl" /]
[@html]
    [@head title="修改用户" css=["fw", "ztree-ajax", "bootstrap-table"] /]
    [@body]
        [@formMain ]
            <div class="fw-forms">
                [@dataForm formId="form-user-edit" ]
                    <input type="hidden" name="userId" value="${sysUser.userId!}" />
                    <input type="hidden" name="userType" value="${sysUser.userType!}" />
                    <input id="treeId" type="hidden" name="deptId" value="${sysUser.deptId!}" />
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">用户姓名：</label>
                        <input class="am-form-field am-radius" type="text" name="userName" value="${sysUser.userName!}" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">登录账号：</label>
                        <input class="am-form-field am-radius" type="text" name="loginName" value="${sysUser.loginName!}" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">手机号码：</label>
                        <input class="am-form-field am-radius" type="text" name="phonenumber" value="${sysUser.phonenumber!}" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label>电子邮箱：</label>
                        <input class="am-form-field am-radius" type="text" name="email" value="${sysUser.email!}" />
                    </div>
                    <div class="am-form-group am-form-icon am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">归属部门：</label>
                        <i class="am-icon-sitemap" onclick="selectDeptTree()"></i>
                        <input id="treeName" class="am-form-field am-radius" name="deptName" type="text" onclick="selectDeptTree()" value="${sysUser.deptName!}" readonly required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label>岗位名称：</label>
                        <input class="am-form-field am-radius" type="text" name="userPost" value="${sysUser.userPost!}" />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">用户性别：</label>
                        <select class="am-radius" name="sex" required >
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("sys_user_sex") as dict]
                                [#if dict.dictValue == sysUser.sex ]
                                    <option value="${dict.dictValue!}" selected>${dict.dictLabel}</option>
                                [#else]
                                    <option value="${dict.dictValue!}">${dict.dictLabel}</option>
                                [/#if]
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">用户状态：</label>
                        <select class="am-radius" name="status" required>
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("sys_status") as dict]
                                [#if dict.dictValue == sysUser.status ]
                                    <option value="${dict.dictValue!}" selected>${dict.dictLabel}</option>
                                [#else]
                                    <option value="${dict.dictValue!}">${dict.dictLabel}</option>
                                [/#if]
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>备注：</label>
                        <textarea class="am-radius" name="remark" rows="5" >${sysUser.remark!}</textarea>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>分配角色：</label>
                        <div class="fw-table" style="border: 1px solid #ccc;">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                [/@dataForm]
            </div>
        [/@formMain]

        [@rightToolbar /]

        [@script js=["fw", "validate", "ztree-ajax", "bootstrap-table"] progress="false" ]
            <script type="text/javascript">
                var prefix = ctx + "osfw/system/manage/user";
                var roles = ${convert.toJson(roles!)};

                $("#form-user-edit").validate({
                    rules:{
                        loginName:{
                            minlength: 2,
                            maxlength: 20,
                            chineseZero: true,
                            remote: {
                                url: prefix + "/checkLoginNameUnique",
                                type: "post",
                                dataType: "json",
                                data: {
                                    "userId": function() {
                                        return $("input[name='userId']").val();
                                    },
                                    "loginName": function() {
                                        return $.common.trim($("input[name='loginName']").val());
                                    },
                                }
                            }
                        },
                        email:{
                            email:true,
                            remote: {
                                url: prefix + "/checkEmailUnique",
                                type: "post",
                                dataType: "json",
                                data: {
                                    "userId": function() {
                                        return $("input[name='userId']").val();
                                    },
                                    "email": function() {
                                        return $.common.trim($("input[name='email']").val());
                                    }
                                }
                            }
                        },
                        phonenumber:{
                            isPhone:true,
                            remote: {
                                url: prefix + "/checkPhoneUnique",
                                type: "post",
                                dataType: "json",
                                data: {
                                    "userId": function() {
                                        return $("input[name='userId']").val();
                                    },
                                    "phonenumber": function() {
                                        return $.common.trim($("input[name='phonenumber']").val());
                                    }
                                }
                            }
                        },
                    },
                    messages: {
                        "loginName": {
                            remote: "此登录账号已被使用"
                        },
                        "email": {
                            remote: "Email已经存在"
                        },
                        "phonenumber":{
                            remote: "手机号码已经存在"
                        }
                    },
                    onkeyup: false,
                    focusCleanup: true
                });

                $(function() {
                    var options = {
                        uniqueId: "roleId",
                        data: roles,
                        showSearch: false,
                        showRefresh: false,
                        showToggle: false,
                        showColumns: false,
                        pagination: false,
                        clickToSelect: true,
                        columns: [
                            {
                                checkbox: true,
                                formatter:function (value, row, index) {
                                    if (row.flag) {
                                        return { checked: true };
                                    }
                                    return { checked: false };
                                }
                            },
                            {
                                title: "序号",
                                formatter: function (value, row, index) {
                                    return $.table.serialNumber(index);
                                }
                            },
                            {
                                field: 'roleName',
                                title: '角色名称',
                                sortable: true
                            },
                            {
                                field: 'createBy',
                                title: '创建人'
                            },
                            {
                                field: 'createTime',
                                title: '创建时间',
                                sortable: true
                            }
                        ]
                    };
                    $.table.init(options);
                });

                function selectDeptTree() {
                    var treeId = $("#treeId").val();
                    var deptId = $.common.isNotEmpty(treeId) ? treeId : 0;
                    var url = ctx + "osfw/system/manage/dept" + "/selectDeptTree/" + deptId;
                    $.modal.open('部门选择', url, "380", "500", doSubmit);
                }

                function doSubmit(index, modalo) {
                    var iframeWin = modalo.find('iframe')[0];
                    var treeId = iframeWin.contentWindow.document.querySelector('#treeId').value;
                    var treeName = iframeWin.contentWindow.document.querySelector('#treeName').value;
                    $("#treeId").val(treeId);
                    $("#treeName").val(treeName);
                    $.modal.close(index);
                }

                function clearDeptTree() {
                    $("#treeId").val("0");
                    $("#treeName").val("");
                }

                function submitHandler() {
                    if ($.validate.form()) {
                        var data = $("#form-user-edit").serializeArray();
                        table.set();
                        var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
                        data.push({"name": "roleIds", "value": rows});
                        $.operate.save(prefix + "/edit", data);
                    }
                }
            </script>
        [/@script]
    [/@body]
[/@html]